<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		#pingmu{
			margin:0 auto;
			width: 500px;
			height: 300px;
			position: relative;
		}
		#tu{
			width: 500px;
			height: 300px;
		}
		.leri{
			width: 50px;
			height: 50px;
			position: absolute;
			top:45%;
			border-radius: 50%;
			background-color: #ccc;
			text-align: center;
			line-height: 50px;
			font-size: 20px;
			font-weight: 800;
			opacity: 0.5;
			cursor: pointer;
		}
		ul{
			position: absolute;
			top:250px;
			left: 125px;
		}
		ul li{
			width: 50px;
			height: 50px;
			background-color: #fff;
			float: left;
			margin-right: 5px;
			text-align: center;
			line-height: 50px;
			border-radius:50%;
			opacity: 0.5;
			list-style: none;
			cursor: pointer;
			color: black;
		}
		.show{
			background-color: red;
			color: white;
		}
		#right{
			left: 450px;
		}
	</style>
</head>
<body>
	<div class="pingmu" id="pingmu">
		<img src="0.jpg" alt="" id="tu">
		<span id="left" class="leri">&lt;</span>
		<span id="right" class="leri">&gt;</span>
		<ul>
			<li class="show">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</div>
	<script>
		function v(e){
			return document.getElementById(e);
		}

		var index=0; //当前显示的索引
		v("left").onclick=function(){//左按钮
			if (index==0) {
				index=4;
			}else{
				index--;
			}
			v("tu").src=index+".jpg";
			clearInterval(t);
			lisChange()
		}
		v("right").onclick=function(){//右按钮
			if (index==4) {
				index=0;
			}else{
				index++;
			}
			v("tu").src=index+".jpg";
			clearInterval(t);
			lisChange()
		}
		//轮换图
		function change(){
			if (index==4) {
				index=0;
			}else{
				index++;
			}
			v("tu").src=index+".jpg";
			lisChange()
		}
		//下标轮换
		function lisChange(){
			for (var i = 0; i < lis.length; i++) {
				lis[i].value=i;
				lis[i].className="";
				lis[index].className="show";
			}
		}
		var t=setInterval(change,2000);
		//鼠标脱离按钮后恢复轮换
		v("pingmu").onmouseenter=function(){
			clearInterval(t);
		}
		v("pingmu").onmouseout=function(){
			clearInterval(t);
			t=setInterval(change,2000);
		}

		//下标控制切换
		var lis=document.getElementsByTagName('li');
		for (var i = 0; i < lis.length; i++) {
			lis[i].value=i;
			lis[i].onmouseover=function(){
				clearInterval(t);
				index=this.value;
				v("tu").src=index+".jpg";

				for (var n = 0; n < lis.length; n++) {
					lis[n].className="";
					lis[this.value].className="show";
				}
			}
		}
	</script>
</body>
</html>